<template>
	<div style="display: flex; justify-content: center; margin-top: 150px;">
		<el-card style="width: 550px; margin-bottom: 350px;">
			<div>
				<h1 style="color:#409EFF; display:flex; justify-content:center; margin-top:10px">用户注册</h1>
			</div>
			<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right">
				<el-form-item label="账号" prop="username">
					<el-input v-model="form.username" style="width: 80%"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="form.password" type="password" show-password style="width: 80%"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="checkPass">
					<el-input v-model="form.checkPass" type="password" show-password style="width: 80%"></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="telephone">
					<el-input v-model.number="form.telephone" style="width: 80%"></el-input>
				</el-form-item>
				<el-form-item label="邮箱地址" prop="mail">
					<el-input v-model="form.mail" style="width: 80%"></el-input>
				</el-form-item>


			</el-form>

			<el-row>
				<el-col :span="8" />
				<el-col :span="8">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="save">确 定</el-button>
				</el-col>
				<el-col :span="8" />
			</el-row>

		</el-card>

	</div>

</template>

<script>
	import {
		ElMessage
	} from 'element-plus'


	export default {
		data() {


			const checkPass = (rule, value, callback) => {
				if (!this.editJudge) {
					if (value == "") {
						callback(new Error("请再次输入密码"));
					} else if (value !== this.form.password) {
						callback(new Error("两次输入密码不一致!"));
					} else {
						callback();
					}
				} else {
					callback();
				}
			};

			return {

				form: {
					id: '',
					username: '',
					cheackPassword: '',
					password: '',
					telphone: '',
					mail: '',
					role: '',
				},

				rules: {
					password: [{
						required: true,
						message: "请输入密码",
						trigger: "blur"
					}, ],

					checkPass: [{
									required: true,
									message: "请再次输入密码",
									trigger: "blur"
								},
								{validator: checkPass, trigger: "blur"},
								],

					username: [{
						required: true,
						message: "请输入用户名",
						trigger: "blur"
					}, ],
					role: [{
						required: true,
						message: "请选择角色权限",
						trigger: "change"
					}, ]
				}
			}
		},

		methods: {



			reset() {
				this.loginFrom.username = '';
				this.loginFrom.password = '';
			},

			save() {
				
				this.$refs.form.validate((valid) => {

					if (valid) {
						this.form.role="0";
						this.$api.post("/user/add", this.form)
							.then((res) => {
								if (res.data.code === '200') {
									ElMessage({
										message: "注册成功",
										type: 'success',
									})
									this.$refs.form.resetFields();
									this.$router.replace({
										path: '/login'
									});
								} else {
									ElMessage.error(res.data.msg)
								}
								
							});
					}

				})

			},

		}
	}
</script>

<style>
</style>
